<template>
  <div class="produst-container">
    <ul class="goodsList">
      <li v-for="item in goodsList" :key="item.id" @click="toGoodsDetail(item.id)">
        <!-- 商品图片 -->
        <div class="image">
          <img :src="item.list_pic_url" alt="" />
        </div>
        <!-- 商品描述 -->
        <p>{{ item.name }}</p>
        <!-- 商品价格 -->
        <h6>{{ item.retail_price | RMBFormat }}</h6>
      </li>
    </ul>
  </div>
</template>

<script>
// 导入eventBus.js
// import bus from '@/eventBus.js'
export default {
  name: 'Produst',
  props: {
    goodsList: Array
  },
  data() {
    return {
    }
  },
  methods: {
    toGoodsDetail(id) {
      this.$router.push('/goodsdetail/' + id)
    }
  },
  created() {
    // bus.$on('goods', val => {
    //   console.log(val)
    //   this.goodsList = val
    //   console.log('goods:', this.goodsList)
    // })
    // console.log(this.goodsList)
  }
}
</script>

<style lang="less" scoped>
.produst-container {
  padding: 20px;
  .goodsList {
    display: flex;
    flex-wrap: wrap;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 49%;
      padding: 10px 0;
      margin-bottom: 10px;
      background-color: #fff;
      &:nth-child(2n) {
        margin-left: 10px;
      }
      .image {
        width: 75%;
        img {
          width: 100%;
          height: 100%;
        }
      }
      p {
        margin: 15px 0;
        font-size: 14px;
        color: #333;
      }
      h6 {
        font-size: 14px;
        color: red;
      }
    }
  }
}
</style>
